<template>
    <div>
        <div style="display: inline-flex;margin-top: 20px">
            <el-input
                    v-model="name"
                    :disabled="disabled"
                    :placeholder="placeholder"
                    prefix-icon="el-icon-search"
                    style="width: 350px;margin-right: 10px"
                    clearable
                    @clear="search"
                    @keydown.enter.native="search"></el-input>
            <el-button
                    :disabled="disabled"
                    icon="el-icon-search"
                    type="primary"
                    @click="search">
                搜索
            </el-button>
        </div>
        <el-table
                :data="tableData"
                border
                style="width: 100%">
            <el-table-column
                    fixed
                    prop="id"
                    label="id"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="公司名称"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="home"
                    label="地址"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="jianjie"
                    label="简介"
                    width="420">
            </el-table-column>
            <el-table-column
                    prop="youxiang"
                    label="邮箱"
                    width="300">
            </el-table-column>
            <el-table-column
                    prop="time"
                    label="时间"
                    width="120">
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    width="100">
                <template slot-scope="scope">
                    <el-tooltip class="item" effect="dark" content="删除" placement="top">
                        <el-button type="danger" icon="el-icon-delete" circle @click="deleteVisible(scope.$index)"></el-button>
                    </el-tooltip>
                </template>
            </el-table-column>
        </el-table>



        <el-button type="text" @click="dialogFormVisible = true">新增 Dialog</el-button>

<!--        新增-->
        <el-dialog title="新增" :visible.sync="dialogFormVisible" width="80%" >
            <el-form v-model="form">
<!--                <el-form-item label="id" :label-width="formLabelWidth">-->
<!--                    <el-input  autocomplete="off" v-model="form.id"></el-input>-->
<!--                </el-form-item>-->
                <el-form-item label="公司名称" :label-width="formLabelWidth">
                    <el-input  autocomplete="off" v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="地址" :label-width="formLabelWidth">
                    <el-input  autocomplete="off" v-model="form.home"></el-input>
                </el-form-item>
                <el-form-item label="简介" :label-width="formLabelWidth">
<!--                    <el-input  autocomplete="off" v-model="form.jianjie"></el-input>-->
                    <quill-editor
                            class='editor'
                            v-model="form.jianjie"
                            ref="myQuillEditor"
                            :options="editorOption"
                            @blur="onEditorBlur($event)"
                            @focus="onEditorFocus($event)"
                            @change="onEditorChange($event)"
                            @ready="onEditorReady($event)"
                            style="height: 400px"
                    >
                    </quill-editor>
                </el-form-item>

                <el-form-item label="邮箱" :label-width="formLabelWidth">
                    <el-input  autocomplete="off" v-model="form.youxiang"></el-input>
                </el-form-item>
                <el-form-item label="时间" required prop="Startdate">
                    <el-date-picker  type="datetime"   placeholder="请选择"  format="yyyy-MM-dd HH:mm:ss"   value-format="yyyy-MM-dd HH:mm:ss" v-model="form.time">
                    </el-date-picker>
                </el-form-item>
<!--                <el-form-item label="时间" :label-width="formLabelWidth">-->
<!--                    <el-input  autocomplete="off" v-model="form.time"></el-input>-->
<!--                </el-form-item>-->

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="add">确 定</el-button>
            </div>
        </el-dialog>







        <el-button type="text" @click="dialogFormVisible2 = true">修改 Dialog</el-button>
        <!--        修改-->
        <el-dialog title="修改" :visible.sync="dialogFormVisible2" width="80%">
            <el-form v-model="form">
                <el-form-item label="id" :label-width="formLabelWidth">
                    <el-input  autocomplete="off" v-model="form.id"></el-input>
                </el-form-item>
                <el-form-item label="公司名称" :label-width="formLabelWidth">
                    <el-input  autocomplete="off" v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="地址" :label-width="formLabelWidth">
                    <el-input  autocomplete="off" v-model="form.home"></el-input>
                </el-form-item>
                <el-form-item label="简介" :label-width="formLabelWidth">
<!--                    <el-input  autocomplete="off" v-model="form.jianjie"></el-input>-->
                    <quill-editor
                            class='editor'
                            v-model="form.jianjie"
                            ref="myQuillEditor"
                            :options="editorOption"
                            @blur="onEditorBlur($event)"
                            @focus="onEditorFocus($event)"
                            @change="onEditorChange($event)"
                            @ready="onEditorReady($event)"
                            style="height: 400px"
                    >
                    </quill-editor>
                </el-form-item>
                <el-form-item label="邮箱" :label-width="formLabelWidth">
                    <el-input  autocomplete="off" v-model="form.youxiang"></el-input>
                </el-form-item>
                                <el-form-item label="时间" required prop="Startdate">
                                    <el-date-picker  type="datetime"   placeholder="请选择"  format="yyyy-MM-dd HH:mm:ss"   value-format="yyyy-MM-dd HH:mm:ss" v-model="form.time">
                                    </el-date-picker>
                                </el-form-item>
<!--                <el-form-item label="时间" :label-width="formLabelWidth">-->
<!--                    <el-input  autocomplete="off" v-model="form.time"></el-input>-->
<!--                </el-form-item>-->

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible2 = false">取 消</el-button>
                <el-button type="primary" @click="update">确 定</el-button>
            </div>
        </el-dialog>
</div>

</template>
<script>
    import axios from 'axios';
    export default {
        name:"ComponeyComponet",
        methods:{
            search(){
                this.axios.get("/gongshi/findLike",
                    {
                        params:{
                            name:this.name
                        }
                    })
                    .then(resp=>{
                        console.log(resp)
                        const r = resp.data;
                        this.tableData = r.data;
                        // setTimeout(()=>{this.refresh()},500)
                    });
            },
            handleClick(row){
                console.log(row);
            },

            add() {
                console.log(this.form.jianjie.length),
                //提交请求
                this.axios.post("/gongshi/add",{
                    name:this.form.name,
                    home:this.form.home,
                    jianjie:this.form.jianjie,
                    youxiang:this.form.youxiang,
                    time:this.form.time
                }).then(resp=>{
                    const r=resp.data;
                    console.log(r);
                    // this.$message.success("添加成功");
                })
                //关闭
                this.dialogFormVisible = false;
            },
            update() {
                //提交请求
                this.axios.put("/gongshi/update",null,{
                    params:{
                        id:this.form.id,
                        name:this.form.name,
                        home:this.form.home,
                        jianjie:this.form.jianjie,
                        youxiang:this.form.youxiang,
                        time:this.form.time
                    }

                }).then(resp=>{
                    const r=resp.data;
                    console.log(r);
                    this.$message.success("修改成功");
                })
                //关闭
                this.dialogFormVisible2 = false;
            },
            // async handleSearch() {
            //     try {
            //         const response = await axios.get(`/gongshi/findLike?query=${encodeURIComponent(this.searchQuery)}`);
            //         this.items = response.data;
            //     } catch (error) {
            //         console.error('Error fetching data:', error);
            //         // 可以在这里处理错误，比如显示一个错误消息
            //     }
            //     },

            //     findLike(){
            //     this.axios.get("/gongshi/findLike",{
            //         params:{
            //             name:this.form.name,
            //             home:this.form.home,
            //             jianjie:this.form.jianjie,
            //             youxiang:this.form.youxiang
            //         }
            //
            //     }).then(resp=>{
            //         const r=resp.data;
            //         console.log(r);
            //         this.$message.success("修改成功");
            //     })
            // //     this.axios.get("/gongshi/findLike")
            // //         .then(resp=>{
            // //             const r = resp.data;
            // //             this.tableData = r.data;
            // //         })
            // },

            deleteVisible(index){
                this.form.id = this.tableData[index].id
                //提交请求
                this.axios.delete("/gongshi/del",{
                    params:{
                        id: this.form.id
                    }
                }).then((resp)=>{
                    const r = resp.data;
                    console.log(r);
                    this.$message.success("删除成功!")
                    setTimeout(()=>{this.refresh()},500)
                })
                // location.reload();
            },
            //refresh
            refresh(){
                this.axios.get("/gongshi/findall")
                    .then(resp=>{
                        console.log(resp.data)
                        const r = resp.data;
                        this.tableData = r.data;
                    })
            }
        },
        data() {
            return {
                searchQuery: '',
                items: [],
                input: '',
                form: {
                    id:'',
                    name: '',
                    home: '',
                    jianjie: '',
                    youxiang: '',
                    time: ''
                },
                name:'',
                consult:{
                    Startdate:new Date()
                },
                dialogFormVisible: false,
                dialogFormVisible2:false,
                dialogFormVisible3: false,

                tableData: [{
                    id:'',
                    name: '',
                    home:'',
                    jianjie:'',
                    youxiang:'',
                    time:''
                }]
            }
        },
        created(){
            this.refresh()
        }


    }

</script>

